<template>
  <div class="container">
    <baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT" type="BMAP_MAPTYPE_CONTROL_MAP"></bm-map-type>
    </baidu-map>
  </div>
</template>
<script>
export default {

  data() {

    return {

      //没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
      //当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
      center: {
        lng: 0, lat: 0},
      zoom: 3,
      map: null,
      BMap: null
    }
  },
  methods: {

    //由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
    handler ({
               BMap, map}) {

      this.map = map
      this.BMap = BMap
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>
<style>
.container {

  width: 100%;
  height: 100%;
}
.bm-view {
  width: 100%;
  height: 300px;
}
</style>
